<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://cdn.91haoka.cn/vant.css" />
		<link rel="stylesheet" href="https://static.91haoka.cn/all.css">
		<script src="https://cdn.91haoka.cn/vue.min.js"></script>
		<script src="https://cdn.91haoka.cn/vantall.js"></script>
		<script src="https://cdn.91haoka.cn/axios.min.js"></script>
	</head>
	<style>
		#app{ background: #fff; min-height: 100vh; width: 100vw; padding: 0.3rem; font-size: 0.25rem;}
		img{ max-width: 100%; display: block;}
		.flex{ display: flex;}
		.flexc{ display: flex; align-items: center;}
		.flexbc{ display: flex; justify-content: space-between; align-items: center;}
		.flexcc{ display: flex; justify-content: center; align-items: center;}
		.yy{box-shadow: 0 0 0.1rem #eaeaea; padding: 0.2rem 0.3rem; margin-bottom: 0.3rem;}
		.act{ background: #ccc !important; color: #FFFFFF; padding: 0.1rem 0.2rem;  border-radius: 0.1rem;}
		.act1{ background: #fff; box-shadow: 0 0 0.1rem #eaeaea; padding: 0.1rem 0.2rem; margin-left: 0.2rem; border-radius: 0.1rem;}
	</style>
	<body>
		<div id="app">
			<div>
				<div class="flexc yy">
					<div>
						<img src="img/tx.webp" style="width: 1rem; height: 1rem; border-radius: 0.5rem;">
					</div>
					<div style="margin-left: 0.3rem; font-size: 0.3rem; font-weight: bold;">
						你的名字
					</div>
					<div style="margin-left: 0.3rem; background: #EAEAEE; line-height: 0.6rem; padding: 0 0.2rem; border-radius: 0.3rem;">
						销售内勤
					</div>
				</div>

				
					<div class="flexbc" style="margin-bottom: 0.2rem;">
						<div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem;" class="flexc">
							<div><img src="img/1.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
							<div style="margin-left: 0.2rem;">
								<div style="margin-bottom: 0.1rem;">客户数</div>
								<div style="text-align: center; font-weight: bold;">9个</div>
							</div>
						</div>
						<div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem; margin-left: 0.2rem;" class="flexc">
							<div><img src="img/2.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
							<div style="margin-left: 0.2rem;">
								<div style="margin-bottom: 0.1rem;">联系人数</div>
								<div style="text-align: center; font-weight: bold;">9个</div>
							</div>
						</div>
					</div>
					<div class="flexbc" style="margin-bottom: 0.2rem;">
						<div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem;" class="flexc">
							<div><img src="img/3.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
							<div style="margin-left: 0.2rem;">
								<div style="margin-bottom: 0.1rem;">拜访数</div>
								<div style="text-align: center; font-weight: bold;">9个</div>
							</div>
						</div>
						<div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem; margin-left: 0.2rem;" class="flexc">
							<div><img src="img/4.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
							<div style="margin-left: 0.2rem;">
								<div style="margin-bottom: 0.1rem;">公海客户数</div>
								<div style="text-align: center; font-weight: bold;">9个</div>
							</div>
						</div>
					</div>
					<div style=" padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem; margin-bottom: 0.2rem;" class="flexc">
						<div><img src="img/3.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div style="margin-left: 0.2rem;">
							<div style="margin-bottom: 0.1rem;">通知消息</div>
							<div style="text-align: center; font-weight: bold;">暂无通知消息</div>
						</div>
						<div><img src="img/1.png" style="width: 0.6rem;"></div>
					</div>
					<div style=" padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem;" class="flexc">
						<div><img src="img/3.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div style="margin-left: 0.2rem;">
							<div style="margin-bottom: 0.1rem;">审批消息</div>
							<div style="text-align: center; font-weight: bold;">暂无审批消息</div>
						</div>
						<div><img src="img/1.png" style="width: 0.6rem;"></div>
					</div>
			</div>
			<div style="position: fixed; width: 100%; bottom: 0; left: 0; padding: 0.2rem; border-top: 1px #EAEAEA solid;">
				<div class="flex">
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem; font-size: 0.5rem;"><van-icon name="home-o" /></div>
						<div class="flexcc">首页</div>
					</div>
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem; font-size: 0.5rem;"><van-icon name="apps-o" /></div>
						<div class="flexcc">工作台</div>
					</div>
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem; font-size: 0.5rem;"><van-icon name="manager-o" /></div>
						<div class="flexcc">我的</div>
					</div>
				</div>
			</div>
			
			
		</div>
	</body>
	<script>
		var h = document.documentElement.clientWidth / 7.5 + 'px';
		    document.documentElement.style.fontSize = h;
		new Vue({
		    el: '#app',
		    data: function() {
		    	return {
					act:1
		        }
		    },
		    created(){
		       
		    },
		    mounted () {
		 
		    },
		    methods:{
				// @confirm="sexConfirm" @cancel="sexCancel"  @change="sexChange"
				sexConfirm:function(val){
					
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				sexCancel:function(val){
					console.log(val)
				},
				sexChange:function(val){
					console.log(val)
				}
		    },
		})
		
	</script>
</html>